<template>
	<div class="container">
		<div class="comp-lists" v-for="page in pages" :key="page.id" v-show="page.id === curPageId" :style="page.css | calcStyle">
			<div class="wrap-bg" :style="{
          backgroundColor: page.css.bgc,
		  backgroundImage: 'url(' + page.css.bgi + ')',
		  width:page.css.width,
		  height:page.css.height,
		  backgroundSize:page.css.backgroundSize

        }"></div>
			<vue-drr v-for="comp in page.comps" :w="comp.css.w || comp.css.base.w" :h="comp.css.h || comp.css.base.h" :y="comp.css.t || comp.css.base.t"
			 :x="comp.css.l || comp.css.base.l" :minw="10" :minh="10" :angle="comp.css.rotate || comp.css.base.rotate" :z="comp"
			 @activated="toggleCompid(comp.id)" @dragging="handleDragging" @resizing="handleResizing" @rotating="handleRotating"
			 @click.native="handleClick(comp)" @dblclick.native="handleDblclick(comp)" :key="comp.id" >
			 <!-- :key="comp.id" -->
				<component-renderer :comp="comp" type="edit"></component-renderer>
			</vue-drr>
			<text-tool v-if="isShow"></text-tool>
		</div>
	</div>
</template>
<!--  -->
<script>
	import vueDrr from '@/components/vue-drr'
	import ComponentRenderer from '@/containers/component-renderer'
	import TextTool from '@/components/tool.vue'
	const BASE_COMP_CONFIG_NAME = 'Config'

	export default {
		name: 'TheContainer',
		computed: {
			pages() {
				var pages = this.$store.getters.pages
				return pages;
			},
			curPageId() {
				return this.$store.getters.curPageId
			},
			isShow() {
				return this.$store.getters.isShow
			}
		},
		methods: {
			// 单击选中的元素
			handleClick(comp) {
				this.$store.commit('SET_COMPID', comp.id)
				this.$store.commit('TOGGLE_COMP', comp.id)

				this.$store.commit('OPEN_PROPS_PANEL', {
					name: comp.name + BASE_COMP_CONFIG_NAME,
					id: comp.id
				})
			},
			handleDblclick(comp) {
				//如果是图片，则弹出图片的设置框
				if (comp.name === 'Image') {
					this.$store.commit('SET_PICK_IMG', {
						status: true,
						callback: (img) => {
							this.$store.commit('EDIT_COMP', {
								type: 'props',
								value: {
									src: img.url
								}
							})
						}
					})
				}
			},
			toggleCompid(id) {
				this.$store.commit('SET_COMPID', id)
				this.$store.commit('TOGGLE_COMP', id)
			},
			updateStyle(val) {

				this.$store.commit('EDIT_COMP', {
					type: 'css',
					value: val
				})
			},
			handleResizing(x, y, w, h) {
				this.updateStyle({
					base: {
						t: y,
						l: x,
						w: w,
						h: h
					}
				})
			},
			handleDragging(x, y) {

				this.updateStyle({
					base: {
						t: y,
						l: x
					}
				})
			},
			handleRotating(angle) {

				this.updateStyle({
					base: {
						rotate: angle
					}
				})
			}
		},
		components: {
			vueDrr,
			ComponentRenderer,
			TextTool
		}
	}
</script>
